<template>
  <div class="add-product">
    <h3>添加新商品</h3>
    <div class="form-group">
      <input v-model="name" placeholder="商品名称" class="form-input">
    </div>
    <div class="form-group">
      <input v-model.number="price" type="number" placeholder="价格" min="0" class="form-input">
    </div>
    <div class="form-group">
      <input v-model.number="quantity" type="number" placeholder="数量" min="1" class="form-input">
    </div>
    <button @click="addProduct" class="add-button">添加到购物车</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      price: 0,
      quantity: 1
    }
  },
  methods: {
    addProduct() {
      if (!this.name || this.price <= 0 || this.quantity < 1) {
        alert('请填写完整的商品信息')
        return
      }
      
      const product = {
        id: Date.now(),
        name: this.name,
        price: this.price,
        quantity: this.quantity
      }
      
      this.$store.dispatch('addToCart', product)
      
      // 重置表单
      this.name = ''
      this.price = 0
      this.quantity = 1
    }
  }
}
</script>

<style scoped>
.add-product {
  margin-top: 30px;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 5px;
}

.form-group {
  margin-bottom: 15px;
}

.form-input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.add-button {
  background-color: #42b983;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
}

.add-button:hover {
  background-color: #3aa876;
}

h3 {
  margin-top: 0;
  margin-bottom: 20px;
  color: #333;
}
</style>